<template>
    <div>
       为
    <span style="color:#3f9dff; font-weight:bold;">{{roomInfo.cinema_name}}</span>
    的
    <span style="color:#3f9dff; font-weight:bold;">{{roomInfo.cinema_room_name}}（{{roomInfo.cinema_room_type}}）</span>
    添加排片计划
    <el-divider></el-divider>

    <!-- 表单 -->
    <el-form :model="form" ref="form"
    style="width:700px;" label-width="130px">
      <el-form-item label="选择电影" prop="movie_id">
        <el-select
        ref="selector"
         v-model="form.movie_id" 
         placeholder="请选择电影" 
         style="width:100%"
         filterable
        remote
        reserve-keyword
        :remote-method="remoteMethod"
        :loading="loading">       
          <el-option
          v-for="item in movies" :key="item.id"
           :label="item.title" 
           :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="放映时间" prop="showingon_date">
        <el-col :span="11">
          <el-date-picker value-format="yyyy-MM-dd" v-model="form.showingon_date" type="date" placeholder="选择日期" style="width: 100%;"></el-date-picker>
        </el-col>
        <el-col class="line" :span="2" style="text-align:center;" >-</el-col>
        <el-col :span="11">
          <el-time-select :picker-options="{start:'06:00',step:'00:15',end:'23:59' }" v-model="form.showingon_time" placeholder="选择时间" style="width: 100%;"></el-time-select>
        </el-col>
      </el-form-item>
      <el-form-item label="票价" prop="price">
        <el-input v-model="form.price"></el-input>
      </el-form-item>
      <el-form-item  label="立即发布" prop="status">
        <el-switch
        active-value="1"
        inactive-value="0"
        v-model="form.status"
        >

        </el-switch>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">立即新增排片计划</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
    </div>
</template>

<script>
import httpApi from '@/http'
    export default {
        data() {
            return {
                roomInfo:{},
                form:{
                    cinema_id:'',
                    cinema_room_id:'',
                    movie_id:'',
                    showingon_date:'',
                    showingon_time:'',
                    status:'0',
                    price:''
                },
                loading:false,  // 用于说明当前select是否正在加载异步加载数据
                movies:[]
            }
        },
        methods: {
            submit(){
                this.form.cinema_id=this.roomInfo.cinema_id
                this.form.cinema_room_id=this.$route.params.roomId
                console.log(this.form)
                // 发送http请求，当前放映厅 新增 拍片计划
                httpApi.showingonPlanApi.add(this.form).then(res=>{
                  console.log('新增排片计划',res)
                   console.log('下拉列表对象', this.$refs['selector'])
                  if(res.data.code==200){

                    // 通知用户，新增排片计划成功
                    this.$notify({
                    title: '成功添加拍片计划',
                    dangerouslyUseHTMLString: true,
                    message: `
                    <p>放映厅：${this.roomInfo.cinema_room_name}</p>
                    <p>电影名称：<b>《${this.$refs['selector']._data.selectedLabel}》</b></p>
                    <p>上映时间：<b>${this.form.showingon_date}${this.form.showingon_time}</b></p>
                    <p>票价：<b>${this.form.price}</b></p>
                    `,
                    type:'success'
                  });
                    this.$refs['form'].resetFields()
                    this.form.showingon_time=''
                    
                  }
                })
            },
            /** 异步模糊查询电影信息，更新select选择器 */
            remoteMethod(query){
                this.loading=true   // 刚开始查，发请求转圈加载中
                let params={name:query,page:1,pagesize:100}
                httpApi.movieApi.queryByNameLike(params).then(res=>{
                     this.loading=false    //  加载完了，即将拿到数据，关闭通道可以重新发请求
                    console.log('模糊查询电影列表',res)
                    this.movies=res.data.data.result
                })
            },
            /**加载放映厅的基本信息 */
            initRoomData() {
                let id =this.$route.params.roomId
                httpApi.cinemaRoomApi.queryById({id}).then(res=>{
                    console.log('加载放映厅的基本信息',res)
                    this.roomInfo=res.data.data
                })
            }
        },

        mounted(){
            /**初始化 */
            this.initRoomData()
        }
    }
</script>

<style lang="scss" scoped>

</style>